<template>
	<view class="header-bg-image header-bg">
		<view style="height: 50rpx;"></view>

		<view class="padding-30">
			<view class="margin-30-0 flex-around" @click="$tools.navigateBack()">
				<u-icon name="arrow-left" color="#333333" size="20"></u-icon>
				<view class="fontSize-18 color-000 flex1 text-center">会员签到</view>
				<view style="width: 40rpx;"></view>
			</view>
			<view class="common-empty" v-if="addressList.length==0">
				<u-empty mode="address" icon="http://cdn.uviewui.com/uview/empty/address.png" textSize="18" width="200"
					height="200" marginTop="150">
				</u-empty>
			</view>
			<view class="address-list">
				<template v-if="orderCode !== '订单选择地址'">
					<view class="common-boderRadius-view common-between" style="margin-bottom: 30rpx;"
						v-for="(item,index) in addressList" :key="index">
						<view>
							<view class="common-alignItems-center">
								<view class="address-default-icon" v-if="item.is_default==1">默认</view>
								<view class="address-default-title"><text
										style="margin-right: 20rpx;">{{item.name}}</text>
									{{item.mobile}}
								</view>
							</view>
							<view class="address-default-desc">
								{{item.area}} {{item.address}}
							</view>
						</view>
						<image class="address-update-image" src="../../../../static/image/32.png"
							@click.stop="$tools.navigateTo('/pages/mine/mine-list/address/addess-form?order_id='+item.id+'&item='+JSON.stringify(item))"
							mode="widthFix"></image>
					</view>
				</template>
				<template v-else>
					<view class="common-boderRadius-view common-between" style="margin-bottom: 30rpx;"
						v-for="(item,index) in addressList" :key="index" @click="select_site1(index,item)">
						<view>
							<view class="common-alignItems-center">
								<view class="address-default-icon" v-if="item.is_default==1">默认</view>
								<view class="address-default-title"><text
										style="margin-right: 20rpx;">{{item.name}}</text>
									{{item.mobile}}
								</view>
							</view>
							<view class="address-default-desc">
								{{item.area}} {{item.address}}
							</view>
						</view>
					</view>
					<!-- <image class="address-update-image" src="../../static/index/05.png" mode="widthFix"></image> -->
				</template>
			</view>

			<view style="padding-bottom: 100rpx;">
				<u-loadmore v-if="loading" status="loading" />
				<u-loadmore v-if="isLastPage" status="nomore" />
			</view>

			<!-- 占位 -->
			<view style="height: 200rpx;"></view>
			<!-- 底部操作条 -->
			<view class="common-fixed-bottom" @click="$tools.navigateTo('/pages/mine/mine-list/address/addess-form')">
				<u-button type="primary" color="#967C5E" text="添加新地址"
					:customStyle="{width:'100%',height:'80rpx',borderRadius:'20rpx'}"></u-button>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		mapMutations
	} from 'vuex'
	export default {
		data() {
			return {
				page: 1,
				limit: 20,
				addressList: [],
				isLastPage: false,
				loading: false,
				orderCode: ''
			}
		},
		onLoad(e) {
			this.orderCode = e.orderCode
		},
		onShow() {
			this.page = 1
			this.limit = 10
			this.addressList = []
			this.listsAddress()
		},
		// 刷新 上拉刷新
		onPullDownRefresh() {
			this.page = 1
			this.isLastPage = false
			this.addressList = []
			this.listsAddress().finally(() => {
				// 停止当前页面下拉刷新
				uni.stopPullDownRefresh();
			});
		},
		// 加载下一页 下拉加载
		onReachBottom() {
			if (this.addressList.length >= this.page * this.limit) {
				this.isLastPage = false;
				this.page += 1;
				this.listsAddress();
			} else {
				this.isLastPage = true
			}
		},
		methods: {
			...mapMutations(['addressItem']),
			select_site1(e, item) {
				this.addressItem(item)
				// 4. 返回上一页面
				uni.navigateBack({
					delta: 1 // 返回的页面数
				})
			},
			async listsAddress() {
				let res = await this.$http.post(this.$api.address_list, {
					page: this.page,
					limit: this.limit
				}, {
					token: true
				})
				this.addressList = [...this.addressList, ...res.data]
				let address_default = this.addressList.filter(item => {
					return item.is_default == 1
				})
				uni.setStorageSync('address_default', address_default[0])
			}
		}
	}
</script>

<style lang="scss">
	.padding-30 {
		padding: 30rpx;
	}

	.margin-top20 {
		margin-top: 20rpx;
	}

	.margin-top30 {
		margin-top: 30rpx;
	}

	.margin-top150 {
		margin-top: 150rpx;
	}

	.margin-top50 {
		margin-top: 50rpx;
	}

	.margin-left50 {
		margin-left: 50rpx;
	}

	.margin-right20 {
		margin-right: 20rpx;
	}

	.margin-right10 {
		margin-right: 10rpx;
	}

	.width-100 {
		width: 100%;
	}

	.margin-bottom20 {
		margin-bottom: 20rpx;
	}

	.margin-bottom30 {
		margin-bottom: 30rpx;
	}

	.width-92 {
		width: 92%;
	}

	.common-line111 {
		width: 100%;
		height: 1rpx;
		background: #DBDBDB;
		border-radius: 0rpx 0rpx 0rpx 0rpx;
	}

	.common-boderRadius-view {
		background-color: #ffffff;
		border-radius: 14px;
		padding: 30rpx;
	}

	.common-center {
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.common-between {
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.conmon-justAliCenter-column {
		display: flex;
		align-items: center;
		flex-direction: column;
		justify-content: center;
	}

	.common-alignItems-center {
		display: flex;
		align-items: center;
	}

	.common-fixed-bottom {
		position: fixed;
		bottom: 0;
		left: 0;
		padding: 30rpx;
		width: 92%;
		background-color: #ffffff;
	}

	.fontWeight-bold {
		font-weight: bold;
	}

	.fontSize-18 {
		font-size: 18px;
	}

	.color-000 {
		color: #000000;
	}

	.fontSize-13 {
		font-size: 13px;
	}

	.fontSize-30 {
		font-size: 30px;
	}

	.color-333 {
		color: #333333;
	}

	.common-boderRadius-view {
		background-color: #ffffff;
		border-radius: 14px;
		padding: 30rpx;
	}

	.address-update-image {
		width: 32rpx;
		height: 32rpx;
		flex-shrink: 0;
		margin-left: 10rpx;
	}

	.address-default-desc {
		font-weight: 400;
		font-size: 26rpx;
		color: #333333;
		line-height: 1.5;
	}

	.address-default-title {
		font-weight: bold;
		font-size: 32rpx;
		color: #000000;
	}

	.address-default-icon {
		display: flex;
		align-items: center;
		justify-content: center;
		padding: 5rpx 10rpx;
		// background: linear-gradient(180deg, #967C5E 70%, #F8F6F3 100%);
		background-color: #967C5E;
		border-radius: 7rpx;
		font-weight: 400;
		font-size: 24rpx;
		color: #FFFFFF;
		margin-right: 20rpx;
	}

	.common-alignItems-center {
		margin-bottom: 20rpx;
	}

	.common-empty {
		display: flex;
		align-items: center;
		justify-content: center;
	}
</style>